// 导入路由
import { BrowserRouter, Route, Routes } from 'react-router-dom'

import { AuthRoute } from '@/components/AuthRoute'

// 导入页面组件
import Login from './pages/Login'
import GeekLayout from './pages/Layout'
import Home from './pages/Home'
import Article from './pages/Article'
import Publish from './pages/Publish'

// 导入history组件
import { HistoryRouter, history } from './utils/history'

// 导入必要组件
import { lazy, Suspense } from 'react'

// 配置路由规则
function App () {
  return (
    <HistoryRouter history={history}>
      <Suspense
        fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200
            }}
          >
            loading...
          </div>
        }
      >
        {/* <BrowserRouter> */}
        <div className="App">
          <Routes>
            {/* 需要鉴权的路由 */}
            <Route path="/" element={
              <AuthRoute>
                <GeekLayout />
              </AuthRoute>
            } >
              {/* 二级路由默认页面 */}
              <Route index element={<Home />} />
              <Route path="article" element={<Article />} />
              <Route path="publish" element={<Publish />} />
            </Route>
            {/* 不需要鉴权的路由 */}
            <Route path='/login' element={<Login />} />
          </Routes>
        </div>
        {/* </BrowserRouter> */}
      </Suspense>
    </HistoryRouter>
  )
}

export default App